<template>
  <!-- html -->
  <div class="person">
    姓：<input type="text" v-model="firstname" id="" /> <br />
    名：<input type="text" v-model="lastname" id="" /> <br />
    <button @click="changFullName">将全名改为li-si</button>
    全名：<span>{{ fullName }}</span>
  </div>
</template>

<script lang="ts" setup name="Person">
import { ref, computed } from "vue";
let firstname = ref("zhang");
let lastname = ref("san");

//这么定义的fullName是一个计算属性，且是只读的
let fullName = computed({
  get() {
    return (
      firstname.value.slice(0, 1).toUpperCase() +
      firstname.value.slice(1) +
      "-" +
      lastname.value.slice(0, 1).toUpperCase() +
      lastname.value.slice(1)
    );
  },
  set(val) {
    const [str1, str2] = val.split("-");
    firstname.value = str1;
    lastname.value = str2;
  },
});

function changFullName() {
  fullName.value = "li-si"; //对fullNanme计算属性赋值 调用set() 传入属性值作为参数
}
</script>

<style scoped>
/* 样式 */
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
button {
  margin: 0 5px;
}
</style>
